<template>
  <div class="workorder">
    <div>
      <Crumbs title="开发者社区" sub-title="开发者认证" />
    </div>
    <div class="main">
      <el-row>
        <el-form :inline="true" :model="formInline">
          <el-form-item>
            <el-select v-model="formInline.orderType" placeholder="工单类型" clearable>
              <el-option label="开发者认证" value="6"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formInline.workStatus" placeholder="工单状态" clearable>
              <el-option label="待回复" value="0"></el-option>
              <el-option label="待办" value="2"></el-option>
              <el-option label="关闭" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formInline.priority" placeholder="优先级" clearable>
              <el-option label="紧急" value="0"></el-option>
              <el-option label="高" value="1"></el-option>
              <el-option label="中" value="2"></el-option>
              <el-option label="低" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" clearable> </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="default" @click="reset">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="linkTo('/devCertApply')">新增</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <div style="max-height: calc(100% - 100px); overflow-y: auto" ref="tableBoxref">
        <el-row>
          <el-table :data="tableData" size="small"  highlight-current-row>
            <el-table-column prop="orderNo" label="工单编号" align="center" />
            <el-table-column label="工单类型" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.orderType === '6'">开发者认证</span>
              </template>
            </el-table-column>
            <el-table-column prop="orderDesc" label="工单描述" align="center" />
            <el-table-column label="优先级" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.priority === '0'">紧急</span>
                <span v-if="scope.row.priority === '1'">高</span>
                <span v-if="scope.row.priority === '2'">中</span>
                <span v-if="scope.row.priority === '3'">低</span>
              </template>
            </el-table-column>
            <el-table-column prop="createBy" label="创建人" align="center" />
            <el-table-column prop="endDate" label="截止时间" align="center" />
            <el-table-column label="工单状态" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.workStatus === '0'">待回复</span>
                <span v-if="scope.row.workStatus === '2'">待办</span>
                <span v-if="scope.row.workStatus === '1'">关闭</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text">流转</el-button>
                &nbsp;&nbsp;
                <el-popconfirm title="是否删除该工单数据？" @confirm="remove(scope.row)">
                  <el-button type="text" slot="reference">删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </div>

      <p>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChangePage"
          :current-page="formInline.pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="formInline.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </p>
    </div>
  </div>
</template>
+
<script>
export default {
  components: {},
  data () {
    return {
      date: [],
      formInline: {
        orderType: '',
        workStatus: '',
        priority: '',
        // beginDate: '',
        // finishDate: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0
      , tableData: [],
    };
  },
  created () {
    this.loadData();
  },
  methods: {
    handleClick (data) {
      this.$router.push({
        path: '/devWorkOrderDetail',
        query: {
          orderNo: data.orderNo
        }
      })
    },
    //  删除
    remove (data) {
      this.$http({
        url: `/api/work/order/finleinfo/delete/${data.orderNo}`,
        method: 'get',
      }).then(res => {
        this.loadData()
      })
    },
    create () { },
    onSubmit () {
      this.formInline.pageNum = 1
      this.loadData()
    },
    reset () {
      this.formInline.orderType = "";
      this.formInline.workStatus = "";
      this.formInline.priority = "";
      // this.formInline.beginDate = "";
      // this.formInline.finishDate = "";
      this.date = []
      this.loadData()
    },
    loadData () {
      this.formInline.beginDate = this.date[0]
      this.formInline.finishDate = this.date[1]
      console.log(this.formInline)
      this.$http({
        url: '/api/work/order/fileinfo/list',
        method: 'GET',
        params: this.formInline
      }).then(res => {
        this.tableData = res.data.rows
        this.total = res.data.total
        console.log(this.tableData)
      })
    },
    // 监听分页pagesize改变函数
    handleSizeChange (newSize) {
      this.$refs.tableBoxref.scrollTop = 0
      this.formInline.pageNum = 1
      this.formInline.pageSize = newSize
      this.loadData()
    },
    // 监听怕个pagenum改变函数
    handleCurrentChangePage (newPage) {
      this.formInline.pageNum = newPage
      this.loadData()
    },
    pass (row) { //流转
      this.$router.push('/devWorkOrderDetail')
    },
    linkTo (path) {
      this.$router.push(path)
    }
  },
};
</script>

<style lang="scss" scoped>
.workorder {
  height: calc(100vh - 100px);
  background-color: #f8f8f8;
  padding: 5px 30px 10px;

  .main {
    height: 92%;
    background-color: white;
    // overflow-y: auto;
    box-sizing: border-box;
    padding: 20px;
    position: relative;
  }
}
</style>
